<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>

  <fmt:setBundle basename="ApplicationMessage" />
  <fmt:setLocale value="zh_CN" />

  <%@ include file="/WEB-INF/include/meta.jsp"%>
  <%@ include file="/WEB-INF/include/css.jsp"%>
  <link href="${ctx.resource}/css/select2.css" rel="stylesheet">
  <link href="${ctx.resource}/css/select2-bootstrap.css" rel="stylesheet">
  <title>订单详情 - 租房宝金融管理平台</title>
</head>
<body>

  <%@ include file="/WEB-INF/include/header.jsp"%>
  
  <div class="web-g-main">

    <%@ include file="/WEB-INF/include/aside.jsp"%>
    <div class="content">
      <header class="header clearfix">
          <h3 class="pull-left">订单详情</h3>
          <div class="btn-toolbar pull-right">
          	<h3><a href="javascript:history.go(-1)" target=_self><< 返回</a></h3>
          </div>
          
       </header>

       <c:if test="${not empty infoMessage}">
            <div class="alert alert-success alert-dismissable alert-fade top-margin-10 text-align-center">
              <button type="button" class="close" data-dismiss="alert">&times;</button>
              <i class="glyphicon glyphicon-info-sign"></i>&nbsp;&nbsp;
              <fmt:message key="${infoMessage}" />
            </div>
       </c:if>

       <div class="row">
            <div class="col-xs-6">
            
              <div class="panel panel-default feature-panel">
              
                <div class="panel-heading">
                  <h3 class="panel-title">订单信息</h3>
                </div>
                
                <div class="panel-body">
                
                  <div class="row">
                      <input type="hidden" name="orderId" value="${order.id }" id="orderId" >
                      <div class="text-align-right col-xs-2 col-md-2"><p>订单号</p></div>
                      <div class="text-align-left col-xs-4 col-md-4"><p><strong>${order.orderNo}</strong></p></div>
                      <div class="text-align-right  col-xs-2 col-md-2"><p>订单状态</p></div>
                      <div class="text-align-left col-xs-4 col-md-4"><p><strong><fmt:message key="${order.orderStatus.key}" /></strong></p></div>
                  </div>
                  
                  <div class="row">
                      <div class="text-align-right col-xs-2 col-md-2"><p>订单金额</p></div>
                      <div class="text-align-left col-xs-4 col-md-4"><p><strong>${order.totalRent}</strong></p></div>
                      <div class="text-align-right col-xs-2 col-md-2"><p>应付日期</p></div>
                      <div class="text-align-left col-xs-4 col-md-4"><p><strong><fmt:formatDate value="${order.dueDate}" pattern="yyyy/MM/dd" /></strong></p></div>
                      <%-- <div class="text-align-right col-xs-2 col-md-2"><p>付款周期</p></div>
                      <div class="text-align-left col-xs-2 col-md-2"><p style="text-align: center;"><strong><fmt:formatDate value="${order.startDate}" pattern="yyyy/MM/dd" /></strong></p><p style="text-align: center;">至</p><p style="text-align: center;"><strong><fmt:formatDate value="${order.endDate}" pattern="yyyy/MM/dd" /></strong></p></div> --%>
                  </div>
                  
                  <div class="row">
                      <div class="text-align-right col-xs-2 col-md-2"><p>租客</p></div>
                      <div class="text-align-left col-xs-4 col-md-4"><p><strong>${order.customer.name}</strong></p></div>
                      <div class="text-align-right  col-xs-2 col-md-2"><p>收款方</p></div>
                      <div class="text-align-left col-xs-4 col-md-4"><p><strong>${not empty data.getFactoringContract(order.contract.contractNo) ? data.getFactoringContract(order.contract.contractNo).company.fullName : order.contract.app.company.fullName}</strong></p></div>
                      <%-- <div class="text-align-right  col-xs-2 col-md-2"><p>商户</p></div>
                      <div class="text-align-left col-xs-2 col-md-2"><p><strong>${order.contract.app.name}</strong></p></div>
                      <div class="text-align-right  col-xs-2 col-md-2"><p>房源</p></div>
                      <div class="text-align-left col-xs-2 col-md-2"><p><strong>${order.contract.house.community}</strong></p></div> --%>
                  </div>
                  <%-- <div class="row text-center vertical-margin-20">
                     <c:if test="${isDirectBank }">
                       <a href="${ctx}/orders/all/${order.id }/deduct" class="btn btn-default btn-shadow btn-shadow-default demo2do-btn" data-target="#" data-toggle="modal" title="扣款" <c:if test="${!order.canDeduct() }"> disabled="disabled"</c:if>>扣款</a>&nbsp;&nbsp;&nbsp;&nbsp;
                       <a href="${ctx}/orders/all/${order.id }/pay" class="btn btn-default btn-shadow btn-shadow-default demo2do-btn" data-target="#" data-toggle="modal" title="打款" <c:if test="${!order.canPay() }"> disabled="disabled"</c:if>>打款</a>
                     </c:if>
                  </div> --%>
                </div>
              
              </div>
            </div>
            
          <div class="col-xs-6">
           
           <div class="panel panel-default feature-panel">
             <div class="panel-heading">
               <h3 class="panel-title">租约信息</h3>
             </div>
             <div class="panel-body">
                  <div class="row">
                      <div class="text-align-right col-xs-2 col-md-2"><p>租约号</p></div>
                      <div class="text-align-left col-xs-4 col-md-4"><p><strong>${order.contract.contractNo}</strong></p></div>
                      <div class="text-align-right  col-xs-2 col-md-2"><p>商户</p></div>
                      <div class="text-align-left col-xs-4 col-md-4"><p><strong>${order.contract.app.name}</strong></p></div>
                  </div>              
	               <div class="row">
                      <div class="text-align-right  col-xs-2 col-md-2"><p>房源名称</p></div>
                      <div class="text-align-left col-xs-6 col-md-6"><p><strong>${order.contract.house.community}</strong></p></div>                  
	               </div>
	               <div class="row">
                      <div class="text-align-right  col-xs-2 col-md-2"><p>房源地址</p></div>
                      <div class="text-align-left col-xs-6 col-md-6"><p><strong>${order.contract.house.address}</strong></p></div>                      
                 </div>
             </div>
           </div>
           
         </div>
            
       </div>
       
      <c:if test="${isDirectBank }">
      <div class="row">
        <div class="col-xs-12">

          <div class="panel panel-default feature-panel">
            <div class="panel-heading">
              <h3 class="panel-title">关联流水</h3>
            </div>
            <div class="panel-body">
              <div class="col-xs-12">
                <table
                  class="table table-striped demo2do-table bottom-margin-20">
                  <thead>
                    <tr>
                      <th>时间</th>
                      <th>金额</th>
                      <th>附言</th>
                      <th>摘要</th>
                      <th>操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    <c:forEach var="receiveOrderMap"
                      items="${mapList}">
                      <tr>
                        <td><fmt:formatDate
                            value="${receiveOrderMap.appArriveRecord.time}"
                            pattern="yyyy/MM/dd HH:mm:SS" /></td>
                        <td>&yen;&nbsp;${receiveOrderMap.appArriveRecord.amount}</td>
                        <td>${receiveOrderMap.appArriveRecord.remark}</td>
                        <td>${receiveOrderMap.appArriveRecord.summary}</td>
                        <td><a id="${receiveOrderMap.id } " href="#" class="unbind">解绑</a></td>
                      </tr>
                    </c:forEach>
                  </tbody>
                </table>
              </div>
              
              <div class="row text-center vertical-margin-20">
                   <a href="${ctx}/orders/all/${order.id }/deduct" class="btn btn-default btn-shadow btn-shadow-default demo2do-btn" data-target="#" data-toggle="modal" title="扣款" <c:if test="${!order.canDeduct() }"> disabled="disabled"</c:if>>扣款</a>&nbsp;&nbsp;&nbsp;&nbsp;
                   <a href="${ctx}/orders/all/${order.id }/pay" class="btn btn-default btn-shadow btn-shadow-default demo2do-btn" data-target="#" data-toggle="modal" title="打款" <c:if test="${!order.canPay() }"> disabled="disabled"</c:if>>打款</a>&nbsp;&nbsp;&nbsp;&nbsp;
                   <a href="${ctx}/orders/all/${order.id }/bufferDeduct" class="btn btn-default btn-shadow btn-shadow-default demo2do-btn" data-target="#" data-toggle="modal" title="缓冲扣款" <c:if test="${!order.canBeBufferingDeducted(11) }"> disabled="disabled"</c:if> <c:if test="${!order.canDeduct() }"> disabled="disabled"</c:if>>缓冲扣款</a>
              </div>
            </div>
          </div>
        </div>
      </div> 
      </c:if>
       
       <div class="row">
         <div class="col-xs-12">
         
           <div class="panel panel-default feature-panel">
             <div class="panel-heading">
               <h3 class="panel-title">扣款记录</h3>
             </div>
               <div class="panel-body">
       <div class="col-xs-12">
         <table
           class="table table-striped demo2do-table bottom-margin-20">
           <thead>
             <tr>
               <th>交易号</th>
               <th>订单号</th>
               <th>商户支付单号</th>
               <th>付款人</th>
               <th>打款方</th>
               <th>支付时间</th>
               <th>支付金额</th>
             </tr>
           </thead>
           <tbody>
             <c:forEach var="transactionRecord"
               items="${transactionRecords}">
               <tr>
                 <td>${transactionRecord.tradeNo}</td>
                 <td>${transactionRecord.orderNo}</td>
                 <td>${transactionRecord.merchantPaymentNo}</td>
                 <td>${data.getOrder(transactionRecord.orderNo).customer.name}</td>
                 <td>${transactionRecord.paymentInstitution.name}</td>
                 <td><fmt:formatDate
                     value="${transactionRecord.lastModifiedTime}"
                     pattern="yyyy/MM/dd HH:mm:SS" /></td>
                 <td>&yen;&nbsp;${transactionRecord.payMoney}</td>
               </tr>
             </c:forEach>
           </tbody>
         </table>
       </div>
       </div>
       </div>
     </div>  
    </div>   
    
      <div class="row">
        <div class="col-xs-12">

          <div class="panel panel-default feature-panel">
            <div class="panel-heading">
              <h3 class="panel-title">打款记录</h3>
            </div>
            <div class="panel-body">
              <div class="col-xs-12">
                <table
                  class="table table-striped demo2do-table bottom-margin-20">
                  <thead>
                    <tr>
                      <th>订单号</th>
                      <th>付款金额</th>
                      <th>打款时间</th>
                      <th>打款流水号</th>
                      <th>收款方</th>
                    </tr>
                  </thead>
                  <tbody>
                    <c:forEach var="financePaymentRecord"
                      items="${financePaymentRecords}">
                      <tr>
                        <td>${financePaymentRecord.order.orderNo}</td>
                        <td>&yen;&nbsp;${financePaymentRecord.payMoney}</td>
                        <td><fmt:formatDate
                            value="${financePaymentRecord.paymentTime}"
                            pattern="yyyy/MM/dd HH:mm:SS" /></td>
                        <td>${financePaymentRecord.paymentNo}</td>
                        <%-- <td>${financePaymentRecord.payeeName}</td> --%>
                        <td>${data.getCompanyAccountName(financePaymentRecord.order) }</td>
                      </tr>
                    </c:forEach>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>     

    <%@ include file="/WEB-INF/include/footer.jsp"%>
     
  </div>

</div>   
  

  <%@ include file="/WEB-INF/include/script.jsp"%>
  <script src="${ctx.resource}/js/bootstrap-alert-fade-trigger.js"></script>
  <script src="${ctx.resource}/js/circles.min.js"></script>
  <script src="${ctx.resource}/js/bootstrap-switch.min.js"></script>
  <script src="${ctx.resource}/js/bootstrap-modal-trigger.js"></script>
  <script src="${ctx.resource}/js/select2.min.js"></script>
  <script src="${ctx.resource}/js/select2_locale_zh-CN.js"></script>
  <script src="${ctx.resource}/js/earth-preupload.js"></script>
  <script src="${ctx.resource }/js/jquery.form.min.js"></script>
  <script>
  
    $(document).ready(function() {
      
      var myCircle = Circles.create({
        id:           'circle1',
        radius:       40,
        value:        32,
        maxValue:     100,
        width:        10,
        text:         function(value){return '<span class="circle-value">' + value + '</span><span style="font-size: .5em;"> %</span>';},
        colors:       ['#d6e9c6', '#3c763d'],
        duration:       400,
        wrpClass:     'circles-wrp',
        textClass:      'circles-text',
        styleWrapper: true,
        styleText:    true
      });
      
      var myCircle = Circles.create({
        id:           'circle2',
        radius:       40,
        value:        2500,
        maxValue:     3500,
        width:        10,
        text:         function(value){return '<span class="circle-value">' + 2.5 + '</span><span style="font-size: .5em;">K</span>';},
        colors:       ['#d6e9c6', '#3c763d'],
        duration:       400,
        wrpClass:     'circles-wrp',
        textClass:      'circles-text',
        styleWrapper: true,
        styleText:    true
      });
      
    });
  
  </script>
  
  <script type="text/javascript">
  
  $(".unbind").click(function(){
	  var receiveOrderMapId = $(this).attr('id');
	  var orderId = $("#orderId").val();
	  if(confirm("确认解绑？")){
          $.ajax({

            type:'POST',
               url:'${ctx}/orders/detail/unbind',
               data:{'receiveOrderMapId':receiveOrderMapId},
               dataType: 'json',
               error: function(){
                   alert('网络错误！稍后再试！');
               },
               success:function(data){
                 
            	   alert(data.message);
            	   window.location.href = "${ctx}/orders/all/"+orderId+"/detail";
                 //$('#dialog').find('.modal-body p').text(data.message).end().modal();
                   
               }
          });
        }else{
          return false;
        }
	  
  });
  </script>
  <script>
    $("#closeBtn").bind("click", function(){
      var orderId = $("#orderId").val();
      window.location.href = "${ctx}/orders/all/"+orderId+"/detail";
    });
</script>
  <div class="modal fade" id="dialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">提示</h4>
      </div>
      <div class="modal-body">
        <p></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal" id="closeBtn">关闭</button>
      </div>
    </div>
  </div>
</div>
  
</body>
</html>
